<template>
	<view class="app-pages index">
		<view class="content">

			<view class="tools-wrappar">
				<view class="title-wrappar">
					<view class="text">中央广播电视塔门票</view>
					<view class="time" @click="showCalendar = true">
						<text>预订时间</text>
						<view class="time-icon">
							<text>{{selectDate}}</text>
							<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
						</view>
					</view>
				</view>
				<view class="vote-wrappar">
					<view class="vote-wrappar-item" v-for="(item,index) in voteList" :key="index"
						v-if="index == 0?true:showVote">
						<view class="vote-wrappar-item-block">
							<view class="vote-wrappar-item-info">
								<view class="">{{item.productName}}</view>
								<view class="price">
									<text>￥{{item.productPrice}}</text>
									<text style="color:#F59A23; font-size: 24rpx;margin-left: 10rpx;"
										@click="handleReading(item)">购票须知></text>
								</view>
							</view>
							<view class="cell-right">
								<u-number-box v-model="item.voteNumb" @change="e=>valChange(e,index)"
									:min="index == 0 ? 1 : 0" :max="item.productSurplusNum">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="12"></u-icon>
									</view>
									<text slot="input" style="width: 30px;text-align: center;"
										class="input">{{item.voteNumb}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</view>
						</view>
						<view class="tools" v-if="index == 0 && showVoteUp">
							<text>预订其它票</text>
							<view class="tools-btn" @click="showVote = true" v-if="!showVote">展开预订</view>
						</view>
					</view>
					<view class="tools-up" @click="showVote = false" v-if="showVote">收起</view>
				</view>

			</view>
			<view class="cell userinfo_b">
				<view class="">
					<u-cell :border="false">
						<view class="" slot="title" style="display: flex;align-items: center;">
							<text style="margin-right: 16rpx;">游客信息</text>
							<u-icon name="question-circle" size="16" @click="handleShowInfo"></u-icon>
							<text class="question-circle-right-tips1">(请先在旅客列表填写游客信息，再选择游客)</text>
						</view>
					</u-cell>
					<view class="people">
						<blockquote v-for="(item,index) in voteList" :key="index" v-if="item.voteNumb>0"
							style="margin-top: 20rpx;">
							<view class="title">{{item.productName}}</view>
							<view class="people-item" v-for="(_item,_index) in item.peopleInfoData" :key="_index">
								<u-icon @click="handleDeletePeople(index,_index)" name="minus-circle-fill"
									color="#cccccc" size="18"></u-icon>
								<view class="people-index">游客{{_index+1}}</view>
								<view class="people-info">
									<view class="">{{_item.userName}}</view>
									<view class="">身份证：{{_item.userCard}}</view>
									<view class="">手机号：{{_item.userPhone}}</view>
								</view>
							</view>
							<view class="people-selector-tips" v-if="item.peopleInfoData.length != getVoteNumb(item)"
								@click="handleSeletorPeople(index,item,getVoteNumb(item))">
								<text>请选择游览游客</text>
								<u-icon name="arrow-right" color="#cccccc" size="12"></u-icon>
							</view>
						</blockquote>
					</view>
					<view class="form">
						<view class="form-item">
							<view class="form-item-label">联系人姓名</view>
							<u--input border="surround" placeholder="请输入姓名" v-model="userName" :customStyle="{
								 width:'400rpx'
							 }" />
						</view>
						<view class="form-item">
							<view class="form-item-label">联系人手机</view>
							<u--input border="surround" placeholder="请输入手机号" v-model="userPhone" :customStyle="{
								 width:'400rpx'
							 }" />
						</view>
						<view class="form-item" style="font-size: 22rpx;">(联系人姓名、手机号码用于接收门票预订成功短信)</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购票须知 -->
		<u-popup :show="show" mode="center">
			<view class="popup">
				<view class="cell">
					<u-cell :border="true">
						<view class="" slot="title">购票须知</view>
						<view class="" slot="value">
							<u-icon @click="show = false" name="close-circle" size="30rpx" color="rgb(144, 147, 153)">
							</u-icon>
						</view>
					</u-cell>
					<view class="padding">
						<u-cell :border="false">
							<view class="tips" slot="title">入塔须知</view>
							<text class="label" slot="label">
								1、开放时间：08:30-21:30；
								2、所有票型一经验证不予退款；
								3、门票当天有效，出园需入园，需再次购票；
								4、为保证入园顺利，预订时务必填写真实姓名、手机号等信息
							</text>
						</u-cell>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 底部按钮 -->
		<view class="btn">
			<view class="btn-form" v-if="showDetailed">
				<view class="btn-form-title">金额明细</view>
				<view class="btn-form-item app-pages">
					<view class="btn-form-item-label">中央广播电视塔门票</view>
					<view class="btn-form-item-value">￥{{totalPrice}}</view>
				</view>
				<view class="btn-form-item app-pages" v-for="(item,index) in voteList" :key="index"
					v-if="item.voteNumb">
					<view class="btn-form-item-label">{{item.productName}}</view>
					<view class="btn-form-item-value">￥{{item.productPrice}} X{{item.voteNumb}}</view>
				</view>
			</view>

			<view class="app-pages" style="display: flex;align-items: center;padding-top: 26rpx;">
				<view class="btn-left">
					<text class="" style="color: rgb(245, 154, 35);">
						<text style="font-size: 26rpx;">￥</text>
						<text>{{totalPrice}}</text>
					</text>
				</view>
				<view class="btn-right">
					<view class="button">
						<view style="margin-right: 24rpx; font-size: 26rpx;display: flex;align-items: center;"
							@click="handlePrice">
							<text style="margin-right: 8rpx;">明细</text>
							<u-icon name="arrow-up" size="14" color="#cccccc"></u-icon>
						</view>
						<view class="submit" @click="handleAddlist">提交订单</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 日历 -->
		<u-calendar :show="showCalendar" mode="single" showLunar color="#f74062" @confirm="confirm" @close="cencel"
			:defaultDate="selectDate" title="请选择日期" :isShowTop="false"></u-calendar>
		<!-- 游客信息须知 -->
		<conceal v-if="showConceal" @cancel="handleConcalCancel"></conceal>
		<!-- 购票须知 -->
		<notice-vote ref="notice-vote"></notice-vote>
	</view>
</template>
<script>
	/**
	 * 前端票种判断顺序
	 * 成人登塔门票 1 00001231_00009223
	 * 儿童登塔门票 2 00001231_00005841
	 * 老年登塔门票 3 00001231_00005840
	 * 夜场双人登塔门票 4 00001231_00002881
	 * 亲子1+1登塔门票 5 00001231_00002880
	 * 亲子2+1登塔门票 6 00001231_00016361
	 * “畅玩中塔”沉浸式VR嗨玩套票（儿童票） 7 00001231_00015824
	 * “畅玩中塔”沉浸式VR嗨玩套票（成人票） 8 00001231_00015823
	 * 中央电视塔年卡 9 00001231_00014083 
	 * */
	import idCardNumberVerify from "./idCardNumber/index.js"
	import conceal from "@/components/conceal/index.vue";
	import {
		dictProductType,
		getOrderByIdDetails,
		parametersList
	} from "@/http";
	import NoticeVote from './components/noticeVote.vue';
	export default {
		components: {
			conceal,
			NoticeVote
		},
		data() {
			return {
				totalPrices: null,
				showConceal: false,
				showVoteUp: true, //是否显示展开更多票
				voteList: [],
				voteIndex: 0, //选择人员的下标
				showVote: false,
				show: false,
				showDetailed: false, //明细
				showCalendar: false,
				userCard: '',
				userName: '',
				userPhone: '',
				selectDate: '',
				ticketData: {},
				codelist: [],
				data: [],
				value: '',
				dictData: [], //字典
				parametersData: [], //门票参数
				phoneNum: null,
				dataFrom: {
					idCardNumber: null,
					pohone: null,
				},
				disabled: false
			}
		},
		async onLoad(o) {
			this.ticketData = JSON.parse(o.data);
			if (this.ticketData.userPhone) { //开始只允许支付环节
				this.userCard = this.ticketData.userCard;
				this.userName = this.ticketData.userName;
				this.userPhone = this.ticketData.userPhone;
				this.totalPrices = this.ticketData.payPrice; //实际支付
				this.value = this.ticketData.totalNum; //购买数量
				this.disabled = this.ticketData.orderId ? true : false;
			}
			this.selectDate = o.date;
			let res1 = await dictProductType();
			let res2 = await parametersList();
			this.parametersData = res2.data.rows
			this.dictData = res1.data.rows; //票种字典
			this.dictData.forEach(item => {
				if (this.ticketData.productCode == item.dictValue) {
					if (item.dictValue == '00001231_00015824' || item.dictValue == '00001231_00015823' || item
						.dictValue == '00001231_00014083') { // 不展示其它票
						this.showVoteUp = false;
					}

				}
			});
			this.getVote();
		},
		computed: {
			totalPrice() {
				let total = 0;
				this.voteList.forEach(item => {
					total = total + item.productPrice * item.voteNumb
				});
				console.log('查看内容：', this.voteList)
				return total.toFixed(2);
			}
		},
		onShow() {
			let selectUser = uni.getStorageSync('people_data');
			if (selectUser) {
				if (Array.isArray(selectUser)) {
					this.voteList[this.voteIndex].peopleInfoData = selectUser
				} else {
					this.voteList[this.voteIndex].peopleInfoData = [selectUser]
				}
			};
			uni.setStorageSync('people_data', '');
		},
		methods: {
			getEcho() { //数据回显
				let data = uni.getStorageSync('echo_details');
				console.log('查看内容：', data)
				uni.setStorageSync('echo_details', '');
				this.voteList = this.voteList.map(item => {
					data.forEach(i => {
						if (item.productCode == i.proCode) {
							console.log(item, i)
							item.voteNumb = i.proCount //数量
							item.peopleInfoData = i.visitorList.map(_item => {
								return {
									id: _item.id,
									userCard: _item.idCard,
									userName: _item.name,
									userPhone: _item.phone,
									productCode: _item.productCode
								}
							}); //游客信息
						}
					});
					return item;
				});
			},
			handleReading(options) { //须知
				this.$nextTick(() => {
					this.$refs['notice-vote'].init(options)
				});
			},
			async getVote(voteTime) {
				if (voteTime) this.selectDate = voteTime;
				let arr = [];
				let res = await this.$http.getuselist({
					pageNum: 1,
					pageSize: 99,
					proDate: this.selectDate
				});
				if (!res.data.rows[0]) { //如果没有票就清空
					this.voteList = [];
					uni.showToast({
						title: "当前所选日期没有票",
						icon: "error"
					});
					return;
				}
				res.data.rows.forEach(item => {
					item.peopleInfoData = [];
					let productCode = ['00001231_00014083', '00001231_00015823', '00001231_00015824'];
					if (this.showVoteUp && productCode.some(_item => _item == item.productCode))
				return; //其它预订如果是展示的话就不显示套票	
					item.voteNumb = 0;
					if (this.ticketData.productCode != item.productCode) {
						arr.push(item);
					} else {
						arr = [item, ...arr];
					};
				});
				arr[0].voteNumb = 1;
				this.voteList = arr;
				if (this.ticketData.userPhone) this.getEcho(); //回显
			},
			cencel(options) {
				this.showCalendar = false
			},
			confirm(options) {
				this.showCalendar = false;
				this.getVote(options[0]);
			},
			handlePrice() {
				this.showDetailed = !this.showDetailed;
			},
			handleConcalCancel() {
				this.showConceal = false;
			},
			handleShowInfo() {
				this.showConceal = true;
			},
			valChange(e, index) {
				if (this.voteList[index].voteNumb > e.value) {
					this.voteList[index].peopleInfoData = []
				};
				console.log(e, index)
				this.voteList[index].voteNumb = e.value;
			},
			handleSeletorPeople(index, options, numb = 1) {
				let ids = options.peopleInfoData.map(item => item.id).join(',');
				let dictValue = '';
				this.dictData.forEach(item => {
					if (options.productCode == item.dictValue) {
						dictValue = item.dictValue
					}
				});
				this.voteIndex = index;
				uni.navigateTo({
					url: `/homePages/scenicSpot/passengers?voteNumb=${options.voteNumb}&ids=${ids}&dictValue=${dictValue}`
				});
			},
			async handleAddlist() {
				const phone = /^1[3456789]\d{9}$/;
				for (let i in this.voteList) {
					if (this.voteList[i].voteNumb > 0) { //有票数
						if (this.voteList[i].peopleInfoData.length < this.getVoteNumb(this.voteList[i])) {
							return uni.showToast({
								title: "请选择游客",
								icon: "none"
							});
						};
					}
				};
				if (!this.userName) return uni.showToast({
					title: "联系人姓名不能为空",
					icon: "none"
				});
				if (!phone.test(this.userPhone)) {
					let title = "联系人手机号格式错误";
					if (!this.userPhone) title = '联系人手机号不能为空'
					return uni.showToast({
						title,
						icon: 'none'
					});
				}

				uni.showLoading({
					title: '正在提交',
					mask: true
				});
				let orderVisitorList = [],
					productList = [];
				this.voteList.forEach(item => { //游客绑定当前的门票
					if (item.voteNumb) { // 当购票票数时
						productList.push({
							"date": item.date,
							"productCode": item.productCode,
							"productId": item.productId,
							"productName": item.productName,
							"productNum": item.voteNumb,
							"productPrice": item.productPrice,
						});
					};
					item.peopleInfoData.forEach(_item => {
						orderVisitorList.push({
							idCard: _item.userCard,
							name: _item.userName,
							phone: _item.userPhone,
							productCode: item.productCode
						});
					});
				});
				if (this.disabled) { //支付之前的订单
					return this.weixinPay(this.totalPrices, this.ticketData.orderId);
				};
				let params = {
					productList, //票
					orderVisitorList, //游客
					userName: this.userName,
					userPhone: this.userPhone
				}
				console.log('查看创建订单之前的内容', params)
				this.$http.getushow(params).then(res => {
					if (res.data.code != 200) return uni.showToast({
						title: res.data.msg
					})
					let data = res.data.data
					this.weixinPay(data.totalPrice, data.orderId, data)
				});

			},
			handleDeletePeople(index, _index) {
				let options = this.voteList[index].peopleInfoData;
				this.voteList[index].peopleInfoData = [...options.slice(0, _index), ...options.slice(_index + 1, options
					.length)];
			},
			getVoteNumb(options) { //获取人数
				let total = options.voteNumb;
				this.parametersData.forEach(item => {
					if (options.productCode == item.ticketType) {
						total = Number(item.totalNumber) * total
					}
				});
				return total;
			},
			async weixinPay(totalPrice, orderId, options) {
				let that = this;
				that.$http.getTicketOrderPay({
					payAmount: totalPrice + '',
					thirdOrderId: orderId,
					thirdType: '3',
					payPattern: '1'
				}).then(res => {
					let codelist = res.data.weChatPayDTO
					uni.requestPayment({
						provider: 'wxpay', //
						timeStamp: codelist.timeStamp,
						nonceStr: codelist.nonceStr,
						package: codelist.packageStr,
						signType: 'MD5', //不可变
						paySign: codelist.paySign,
						success: function(ress) {
							//支付成功的回调    
							uni.showToast({
								title: '支付成功！',
								icon: 'success'
							}) //付款了才会调下面的接口
							that.$http.setTicketPaySuccess({
								thirdOrderId: orderId,
								thirdType: '3',
								wxPayType: '2'
							}).then(async res => {
								if (res.data.code == 200) {
									let _details = await getOrderByIdDetails({
										storeOrderId: options.storeOrderId,
										orderType: options.orderType
									});
									let echoDetailsData = {
										_state: 11,
										dateils: _details.data.data,
										userName: that.userName,
										userPhone: that.userPhone,
										payPrice: options.totalPrice,
										orderId: options.orderId,
										storeOrderId: options.storeOrderId
									}
									uni.setStorageSync('echo_details',echoDetailsData);
									console.log("放入的参数：echoDetailsData",echoDetailsData)
									uni.navigateTo({
										url: `/homePages/scenicSpot/orderDetails`
									});
								}
							})
						},
						fail: function(err) {
							console.log('支付失败',err)
							//支付失败的回调   
						}
					});

				})
			}

		},

	}
</script>
<style lang="scss" scoped>
	.question-circle-right-tips1 {
		font-size: 22rpx;
		color: rgb(245, 156, 41);
		margin-left: 12rpx;
	}

	.index {
		background-color: #F6F6F6;
		min-height: 100vh;
		overflow: auto;
	}

	.content ::v-deep .u-cell__body {
		padding: 20rpx 0 !important;
	}

	.content {
		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
	}

	.btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
		background-color: #FFFFFF;
		font-size: 40rpx;
		// box-shadow: 0 -1rpx 4rpx #ccc;
		z-index: 99;

		.btn-form {
			margin-bottom: 120rpx;

			.btn-form-title {
				padding: 30rpx 0;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				border-bottom: 1px solid #f2f2f2;
			}

			.btn-form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #cccccc;

				&:nth-of-type(2) {
					color: black;
				}
			}
		}

		.btn-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.button {
			padding-left: 30rpx;
			display: flex;
			align-items: center;

			.submit {
				padding: 15rpx 35rpx;
				border-radius: 10rpx;
				color: #FFFFFF;
				background-color: rgb(245, 154, 35);
			}
		}

		.btn-left {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.cell {
		margin-top: 30rpx;
		box-shadow: 0 0 4rpx #f2f2f2;
	}

	.tips {
		padding-top: 20rpx;
		font-size: 26rpx;
		color: #F59A23;
	}

	.cell-right {
		display: flex;
		align-items: center;
	}

	.padding {
		padding: 20rpx 40rpx 20rpx 40rpx;
	}

	.yd_b {
		padding: 30rpx;
		background-color: #fff;
	}

	.userinfo_b {
		padding: 30rpx;
		background-color: #fff;
	}



	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #f74062;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.tools-wrappar {
		border-radius: 10rpx;
		background-color: #fff;
	}

	.title-wrappar {
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f2f2f2;

		.text {
			font-size: 32rpx;
			margin-bottom: 18rpx;
			font-weight: bold;
		}

		.time {
			display: flex;
			justify-content: space-between;

			.time-icon {
				display: flex;
				align-items: center;
			}
		}
	}

	.vote-wrappar {
		padding: 20rpx 30rpx;

		.vote-wrappar-item {
			.vote-wrappar-item-block {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			&+.vote-wrappar-item {
				margin-top: 30rpx;
			}

			.vote-wrappar-item-info {
				.price {
					display: flex;
					align-items: flex-end;
				}
			}
		}
	}

	.tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
		height: 40rpx;

		.tools-btn {
			border-radius: 16rpx;
			border: 1px solid rgba(121, 121, 121, 1);
			padding: 8rpx 14rpx;
		}
	}

	.tools-up {
		margin: 20rpx auto;
		border-radius: 16rpx;
		border: 1px solid rgba(121, 121, 121, 1);
		padding: 8rpx 14rpx;
		width: 70rpx;
		text-align: center;
	}

	.people {
		.title {
			padding: 10rpx 0;
			font-weight: bold;
		}

		.people-item {
			display: flex;
			margin-top: 20rpx;

			.people-index {
				margin: 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.people-info {}
		}
	}

	.form {
		margin-top: 50rpx;

		.form-item {
			display: flex;
			align-items: center;

			&+.form-item {
				margin-top: 20rpx;
			}

			.form-item-label {
				margin-right: 20rpx;
			}
		}
	}

	.people-selector-tips {
		color: #cccccc;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		justify-content: space-between;
		margin: 10rpx 0;
	}
</style>
